<template>
	<view>
		<view :class="{ 'share-box': showModel }"></view>
		<view class="model" v-if="showModel" :class="{ 'share-show': showModel }">
			<!-- 图片 -->
			<view class="wxbox" v-if="label == 'img'">
				<view class="d-flex j-center pb-2">{{ modeldata.title }}</view>
				<view class="image" style="text-align: center;">
					<image
						v-if="imgInfo.url == ''"
						src="/static/coustom/upload.png"
						style="width: 150rpx;height: 150rpx;"
						@click="uploadImg"
						mode="aspectFit"
					></image>
					<image v-else style="width:100%;" mode="widthFix" @click="uploadImg" :src="imgInfo.url"></image>
				</view>
				<view class="btn btn-back" @click="confim('img')">保存</view>
				<view class="close" @click="cancal"><icon type="clear" size="26" /></view>
			</view>
			<!-- 文本 -->
			<view class="wxbox" v-else-if="label == 'text'">
				<view class="d-flex j-center pb-2">{{ modeldata.title }}</view>
				<view class="wxbox-inpt-box">
					<!-- <editor id="editor" class="ql-container"  @ready="onEditorReady" placeholder="请输入文本内容"></editor> -->
					<richTextEditor @input="editorInfo" :value="textvalue"></richTextEditor>
					<!-- <textarea v-model="value" class="wxbox-inpt"  :maxlength="-1" placeholder="请输入文本内容"></textarea> -->
				</view>
				<view class="btn btn-back" @click="confim('text')">保存</view>
				<view class="close" @click="cancal"><icon type="clear" size="26" /></view>
			</view>
			<view class="wxbox" v-if="label == 'video'">
				<view class="d-flex j-center pb-2">{{ modeldata.title }}</view>
				<view class="image" style="text-align: center;">
					<video
						v-if="videoInfo.url != ''"
						:poster="videoInfo.firstFrame"
						objectFit="cover"
						style="width:90%;max-height:40vh;"
						@click="uploadVideo"
						:src="videoInfo.src"
					></video>
					<image v-else src="/static/coustom/upload.png" @click="uploadVideo" mode="aspectFit"></image>
				</view>
				<view class="btn btn-back" @click="confim('video')">保存</view>
				<view class="close" @click="cancal"><icon type="clear" size="26" /></view>
			</view>
		</view>
		<view v-if="showModel" class="model-mask"></view>
	</view>
</template>

<script>
// import { uploadFile } from '@/api/common.js';
import richTextEditor from './editor.vue';
export default {
	name: 'modeComp',
	components:{
		richTextEditor
	},
	props: {
		modeldata: {
			type: Object,
			default: (()=>{})
		},
		showModel: {
			type: Boolean,
			default: false
		},
		label: {
			type: String,
			default: ''
		},
		textvalue:{
			type: String,
			default: ''
		},
		isedit:{
			type:Boolean,
			default:false
		},
		editindex:{
			type: String,
			default: ''
		}
	},
	watch:{
		textvalue:{
			handler(newdata,olddata){
				if(newdata){
					this.value = newdata
				}else{
					this.value = ''
				}
			}
		}
	},
	data() {
		return {
			value: '',
			imgInfo: {
				url: '', //地址
				pixel: '', //宽高
				size: '' //大小
			},
			videoInfo: {
				url: '', //地址
				firstFrame: '',
				pixel: '', //宽高
				duration: '' //时长
			}
		};
	},
	methods: {
		cancal() {
			this.$emit('cancal');
		},
		editorInfo(_e){
			this.value = _e
		},
		/**
		 * @type
		 * @video img text
		 */
		confim(type) {
			switch (type) {
				case 'img':
					for (let key in this.imgInfo) {
						console.log(!this.imgInfo[key]);
						if (this.imgInfo[key] == '' || !this.imgInfo[key]) {
							this.$u.Toast('图上异常,请重新上传!');
							return;
						}
					}
					this.$emit('confim', { label: this.label, value: this.imgInfo });
					this.imgInfo = {
						url: '', //地址
						pixel: '', //宽高
						size: '' //大小
					};
					break;
				case 'video':
					for (let key in this.videoInfo) {
						if (this.videoInfo[key] == '' || !this.videoInfo[key]) {
							this.$u.Toast('视频异常,请重新上传!');
							return;
						}
					}
					this.$emit('confim', { label: this.label, value: this.videoInfo });
					this.videoInfo = {
						url: '', //地址
						firstFrame: '', //封面图
						pixel: '', //宽高
						duration: '' //时长
					};
					break;
				case 'text':
					if (this.value == '') {
						this.$u.Toast('请填写内容!', 'top');
						return
					}
					console.log(this.isedit)
					if(this.isedit){
						let obj = {
							label: this.label,
							value: this.value,
							valueindex: Number(this.editindex),
							isedit:this.isedit
						}
						this.$emit('confim',obj);
						this.value = '';
						return
					}
					this.$emit('confim', { label: this.label, value: this.value });
					this.value = '';
					break;
				default:
					break;
			}
		},
		/**
		 * @上传图片
		 */
		uploadImg() {
			let imgInfo = {
				url: '', //地址
				pixel: '', //宽高
				size: '' //大小
			};
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'], //从相册选择
				success: imageRes => {
					console.log(imageRes, '85');
					imgInfo.size = imageRes.tempFiles[0].size;
					uni.showLoading({
						title: '上传中...'
					});
					let i = 0;
					for (let tempFilePath of imageRes.tempFilePaths) {
						i++;
						uploadFile(tempFilePath).then(res => {
							let url = res.url;
							// if (index >= 0) {
							// 	this.imgList[index] = url;
							// } else {
							// 	this.imgList.push(url);
							// }
							// imgList.push(url);
							imgInfo.url = url;
							if (imageRes.tempFilePaths.length <= i) {
								uni.hideLoading();
							}
							uni.getImageInfo({
								src: imgInfo.url,
								success: res1 => {
									console.log(res1, '图片');
									imgInfo.pixel = `${res1.width} * ${res1.height}`;
								}
							});
							this.imgInfo = imgInfo;
							console.log(imgInfo);
						});
					}
				}
			});
		},
		/**
		 * @上传视频
		 */
		uploadVideo() {
			let videoInfo = {
				url: '',
				firstFrame: '',
				pixel: '',
				duration: ''
			};
			uni.chooseVideo({
				compressed: true,
				sourceType: ['album', 'camera'], //相册或拍摄
				maxDuration: 60,
				success: videoRes => {
					videoInfo.duration = videoRes.duration;
					videoInfo.pixel = `${videoRes.width} * ${videoRes.height}`;
					uni.showLoading({
						title: '上传中...'
					});
					uploadFile(videoRes.tempFilePath).then(res => {
						uploadFile('http://tmp/kGYvG41595w5bb91e22c9f2875cf86caff53fe57abf8.jpg').then(res => {
							videoInfo.firstFrame = res.url;
						});
						videoInfo.url = res.url;
						uni.hideLoading();
						console.log(videoInfo);
						this.videoInfo = videoInfo;
					});
				}
			});
		},
		/**
		 * @预览图片
		 */
		previewPayImg(img) {
			this.$emit('cancal');
			let arr = [];
			arr.push(img);
			uni.previewImage({
				urls: arr
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 进入分享动画
.share-show {
	transition: all 2s ease;
	transform: translateY(0%) !important;
}
.share-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.3s;
	z-index: 999;
}
.model-mask {
	width: 100vw;
	height: 100vh;
	background: rgba(51, 51, 51, 0.5);
	// background-image: url('/static/newImg/user/modelback.png');
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	transition: 0.8s;
}
.model {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	// height: 700upx;
	border-radius: 8upx;
	z-index: 1000;
	transition: all 0.8s ease;
	transform: translateY(100%);

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	//微信弹窗
	.btn {
		width: 70%;
		margin: 20rpx auto;
		margin-top: 40rpx;
		padding: 20rpx 0px;
		text-align: center;
		border-radius: 34px;
		font-size: 30rpx;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 15%;
	}
	.wxbox {
		z-index: 998;
		width: 94%;
		height: 65%;
		overflow-y: scroll;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx 0rpx;
		position: relative;
		.close {
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 999;
			text-align: center;
		}
		.wxbox-inpt-box {
			display: flex;
			// justify-content: center;
			border-bottom: 0.5px solid #e5e5e5;
			width: 100%;
			box-sizing: border-box;
			margin: 10upx auto;
			padding: 20upx 0 20upx 0;
			height: 90%;
			overflow: scroll;
			.wxbox-inpt {
				font-size: 26upx;
				color: #999;
				border-radius: 10upx;
				width: 100%;
			}
			textarea {
				padding: 10rpx 0;
				width: 98%;
				letter-spacing: 3rpx;
				line-height: 20rpx;
				font-size: 32rpx;
				color: #252e3b;
				font-weight: 400;
				font-family: PingFang SC-Medium, PingFang SC;
			}
		}
	}
}
</style>
